<template>
  <div class="news">
    <section class="clearfix newsOne">
      <!-- 顶部广告 -->
      <div class="adv">
        <img src="../../../assets/img/news/01.png" alt="">
        <img src="../../../assets/img/news/02.png" alt="">
      </div>
      <!-- 轮播图 -->
      <div id="container">
        <swiper ref="mySwiper" :options="swiperOption">
          <swiper-slide class="swiper-slide games">
            <img src="../../../assets/img/news/03.png" alt="">
          </swiper-slide>
          <swiper-slide class="swiper-slide games">
            <img src="../../../assets/img/news/03.png" alt="">
          </swiper-slide>
          <swiper-slide class="swiper-slide games">
            <img src="../../../assets/img/news/03.png" alt="">
          </swiper-slide>
          <swiper-slide class="swiper-slide games">
            <img src="../../../assets/img/news/03.png" alt="">
          </swiper-slide>
          <p slot="pagination" class="swiper-pagination" />
          <p slot="button-prev" class="swiper-button-prev">
            <i class="iconfont iconmerchantsjoin_btn_jiantoul" />
          </p>
          <p slot="button-next" class="swiper-button-next">
            <i class="iconfont iconmerchantsjoin_btn_jiantour" />
          </p>
        </swiper>
      </div>
      <!-- 今日热点 -->
      <el-card shadow="never">
        <div slot="header">
          <span>今日热点</span>
        </div>
        <div class="text item" @click="NewsDetails">
          <h3>存在健康安全隐患璧山区科尔斯科皮鞋厂召回部分男鞋</h3>
          <p>中国质量新闻网讯，从重庆市市场监督管理局网站获悉，2019年4月19日，璧山区科尔斯皮鞋厂向重庆市市场监督管理局备案召回计划，决定自2019年4月19日起，召回2016年10月20日生产的</p>
        </div>
        <div class="text item" @click="NewsDetails">
          <h3>存在健康安全隐患璧山区科尔斯科皮鞋厂召回部分男鞋</h3>
          <p>中国质量新闻网讯，从重庆市市场监督管理局网站获悉，2019年4月19日，璧山区科尔斯皮鞋厂向重庆市市场监督管理局备案召回计划，决定自2019年4月19日起，召回2016年10月20日生产的</p>
        </div>
        <div class="text item" @click="NewsDetails">
          <h3>存在健康安全隐患璧山区科尔斯科皮鞋厂召回部分男鞋</h3>
          <p>中国质量新闻网讯，从重庆市市场监督管理局网站获悉，2019年4月19日，璧山区科尔斯皮鞋厂向重庆市市场监督管理局备案召回计划，决定自2019年4月19日起，召回2016年10月20日生产的</p>
        </div>
      </el-card>
      <!-- tab切换 -->
      <div class="string" />

      <el-tabs type="border-card">
        <el-tab-pane label="资询集合">
          <div v-for="i in number" :key="i" class="information">
            <div class="informationTxt clearfix">
              <div class="clearfix">
                <div class="newDate">
                  <h6>12</h6>
                  <h6>05月</h6>
                </div>
                <h2>食物“美色”不是罪 懂点科学更放心</h2>
              </div>
              <div class="inforImg">
                <img src="../../../assets/img/news/03.png" alt="">
              </div>
              <p>
                盘点一周资讯，知悉行业动态。上周，我们关注以下热点：2019母情节慈善捐赠活动圆满举行，
                尚赫倾情捐赠；中国环境电器行业产品技术技术交流会暨品牌巡展共商净水事宜；
                四季沐歌斩获2019IAI国际广告大奖；2019Q1中国地表水水质状况公布。
              </p>
              <div class="informationSpan">
                <span><i class="iconfont iconsearch_icon_dianzan" />39</span>
                <span><i class="iconfont iconsearch_icon_paizhuan" />10</span>
                <span><i class="iconfont iconsearch_icon_liulanlaing" />10932</span>
              </div>
            </div>

          </div>
        </el-tab-pane>
        <el-tab-pane label="品牌快讯">品牌快讯</el-tab-pane>
        <el-tab-pane label="行业法规">行业法规</el-tab-pane>
        <el-tab-pane label="原创精选">原创精选</el-tab-pane>
        <el-tab-pane label="原创精选">原创精选</el-tab-pane>
        <el-tab-pane label="精彩专题">精彩专题</el-tab-pane>
      </el-tabs>
      <!-- 点击加载更多 -->
      <el-button type="primary" plain @click="more">查看更多</el-button>
      <!-- 底部广告 -->
      <div class="buttomAdv">
        <img src="../../../assets/img/news/01.png" alt="">
      </div>
    </section>
  </div>
</template>

<script>
// import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
  name: 'News',
  data() {
    return {
      number: 10,
      swiperOption: {
        autoplay: {
          disableOnInteraction: false, // 用户操作后是否禁止自动循环
          delay: 3000// 自自动循环时间
        }, // 可选选项，自动滑动
        speed: 2000, // 切换速度，即slider自动滑动开始到结束的时间（单位ms）
        loop: true, // 循环切换
        grabCursor: true, // 设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状
        // setWrapperSize: true, //Swiper使用flexbox布局(display: flex)，开启这个设定会在Wrapper上添加等于slides相加的宽或高，在对flexbox布局的支持不是很好的浏览器中可能需要用到。
        autoHeight: true, // 自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化。
        scrollbar: '.swiper-scrollbar',
        mousewheelControl: true, // 设置为true时，能使用鼠标滚轮控制slide滑动
        observeParents: true, // 当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper
        pagination: {
          el: '.swiper-pagination',
          // type : 'progressbar', //分页器形状
          clickable: true // 点击分页器的指示点分页器会控制Swiper切换
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      },
      computed: {
        swiper() {
          return this.$refs.mySwiper.swiper
        }
      }
    }
  },
  methods: {
    NewsDetails() {
      this.$router.push('/vMain/details')
    },
    more() {
      this.number += 20
    }
  }
}

</script>

<style scoped>
/* 轮播图 */
.swiper-pagination-bullet-active{
  width: 40px;
}

.news{
  width: 100%;
  max-width: 1920px;
  min-width: 1200px;
  background-color:rgba(246,246,246,1);
}

section{
  width: 1200px;
  margin: 0 auto;
}

#container{
  width: 775px;
  height: 580px;
  float: left;
  margin-right: 25px;
}

#container img{
 width: 100%;
 height: 100%;
}

.adv{
  width: 100%;
  margin: 14px 0 14px 0;
}

.adv img{
  width: 100%;
  height: 72px;
  margin: 6px 0;
}
/* 两侧按钮 */
.swiper-button-next{
  background-image: none;
  width:50px;
  height:120px;
  background:rgba(0,0,0,1);
  opacity:0.34;
  border-radius:4px;
  right: 0px;
  line-height: 120px;
  text-align: center;
}
.swiper-button-next i{
  font-size: 32px;
  color:#FFACA6A3;
}
.swiper-button-next i:hover{
  color:#ffffff;
}
.swiper-button-prev{
  background-image: none;
  width:50px;
  height:120px;
  background:rgba(0,0,0,1);
  opacity:0.34;
  border-radius:4px;
  left: 0px;
  line-height: 120px;
  text-align: center;
}
.swiper-button-prev i{
  font-size: 32px;
  color: #FFACA6A3;
}
.swiper-button-prev i:hover{
  color: #ffffff;
}
/* 下方远点分页 */

/* 今日热点 */
.newsOne .text{
  border-bottom: 1px solid #cccccc;
}
.newsOne .text h3:hover{
  color: rgba(65,122,239,1);
}
.newsOne .text:nth-child(3){
  border-bottom: none;
}

.newsOne .text:nth-child(2) h3{
  color:rgba(65,122,239,1);
}

.newsOne .text h3{
  width:352px;
  height:56px;
  font-size:18px;
  line-height:30px;
  color:rgba(51,51,51,1);
}

.newsOne .text p{
  margin: 10px 0 24px;
  width:352px;
  height:68px;
  font-size:12px;
  line-height:24px;
  color:rgba(102,102,102,1);
}
/* tab切换 */
.el-tabs--border-card{
  margin-top: 25px;
}
.string{
  height: 20px;
  width: 1220px;
  background-color: #F6F6F6;
  position: relative;
  top: 100px;
  left: -12px;
}
.information{
  width: 100%;
  margin-top: 20px;
}

.informationTxt{
  border-bottom: 1px solid #cccccc;
  padding-bottom: 20px;
}

.informationTxt .newDate{
  width:50px;
  height:50px;
  background:rgba(246,246,246,1);
  border-radius:50%;
  float: left;
  text-align: center;
}

.informationTxt .newDate h6{
  height:19px;
  font-size:14px;
  color:rgba(102,102,102,1);
  margin-top: 5px;
}

.informationTxt h2{
  width:536px;
  height:32px;
  font-size:24px;
  font-weight:bold;
  margin: 20px 20px 0;
  color:rgba(51,51,51,1);
  float: left;
}

.informationTxt p{
  width:774px;
  height:82px;
  font-size:16px;
  line-height:30px;
  color:rgba(102,102,102,1);
  margin: 20px 20px 45px;
  float: left;
}

.informationTxt span{
  width:56px;
  height:19px;
  font-size:14px;
  line-height:26px;
  margin-left: 20px;
  color:rgba(102,102,102,1);
}

.informationTxt span i{
  color: rgba(170, 170, 170, 1);
  margin-right: 5px;
}
/* .informationSpan {
  float: left;
} */

.inforImg{
  float: left;
  width: 200px;
  height: 150px;
  margin-top: 20px;
}
.inforImg img{
  width: 100%;
  height: 100%;
}

/* 点击加载更多 */
.el-button{
  width:278px !important;
  height:54px !important;
  border:1px solid rgba(65,122,239,1) !important;
  border-radius:4px !important;
  position: relative  !important;
  top: 100px;
  left: 50%;
  transform: translate(-50%,-50%);
}
.el-button--primary.is-plain{
  width:97px;
  height:32px;
  font-size:24px;
  line-height:32px;
  color:rgba(65,122,239,1);
  letter-spacing:20px;
  background-color:rgba(246,246,246,1);
}
/* 底部广告 */
.buttomAdv {
  width:1200px;
  height:72px;
  background:rgba(195,195,195,1);
  margin: 100px 0;
}

</style>

<style>
/* 修改轮播图下方分页小圆点 */
.swiper-pagination .swiper-pagination-bullet {
  width:12px;
  height:12px;
  background:rgba(255,255,255,1);
  border-radius:50%;
  opacity:1;
}
.swiper-pagination .swiper-pagination-bullet-active {
  width: 40px !important;
  border-radius: 12px !important;
  background: #007aff !important;
  opacity: 1 !important;

}

</style>
